import styles from './index.module.less';

import { Button } from 'antd';
import React, { useEffect, useState } from 'react';

import { message } from '@/App';
import { getCat, getCats, removeCat } from '@/api/books';
import GTable from '@/components/GTable';
import { ICat } from '@/models/Cat';
import { DataSource } from '@/models/DataSource';
import { Pagination } from '@/models/Pagination';

import CatInfoDialog from './CatInfoDialog';
import CreateCatDialog from './CreateCatDialog';
import TableHeader from './TableHeader';
import { CatColumns } from './cat.column';
import { CatFilters } from './cat.filter';

const Workbench = () => {
  const [open1, setOpen1] = useState(false);
  const [open2, setOpen2] = useState(false);
  const [cats, setCats] = useState<DataSource<ICat>>();
  const [filters, setFilters] = useState<CatFilters>({});
  const [pagination, setPagination] = useState<Pagination>({ current: 1, pageSize: 5 });
  const [cat, setCat] = useState<ICat>();

  const fetchCats = async (filters: CatFilters, pagination: Pagination) => {
    const { data } = await getCats({ ...filters, ...pagination });
    setCats(data);
  };

  useEffect(() => {
    fetchCats(filters, pagination);
  }, [pagination, filters]);

  const onSearch = (values: CatFilters) => {
    setFilters(values);
  };

  const onCreate = async () => {
    setCat(undefined);
    setOpen1(true);
  };

  const onClickGet = async (id: string) => {
    const { data } = await getCat(id);
    setCat(data);
    setOpen2(true);
  };

  const onClickUpdate = (record: ICat) => {
    setCat(record);
    setOpen1(true);
  };

  const onClickDelete = async (id: string) => {
    await removeCat(id);
    message.info('删除成功');
    fetchCats(filters, pagination);
  };

  const onConfirm = () => {
    fetchCats(filters, pagination);
  };

  const onChange = (pagination: Partial<Pagination>) => {
    const { current, pageSize } = pagination;
    if (current && pageSize) {
      setPagination({ current, pageSize });
    }
  };

  const columns = [
    ...CatColumns,
    {
      title: '操作',
      dataIndex: 'operation',
      render: (text: string, record: ICat) => (
        <>
          <Button type="link" onClick={() => onClickGet(record.id)}>
            查看
          </Button>
          <Button type="link" onClick={() => onClickUpdate(record)}>
            更新
          </Button>
          <Button type="link" danger onClick={() => onClickDelete(record.id)}>
            删除
          </Button>
        </>
      ),
    },
  ];

  return (
    <div>
      <TableHeader onSearch={onSearch} onCreate={onCreate} />
      <GTable
        className={styles.table}
        columns={columns}
        dataSource={cats}
        rowKey="id"
        pagination={pagination}
        onChange={onChange}
      />
      {open1 && <CreateCatDialog cat={cat} open={open1} setOpen={setOpen1} onConfirm={onConfirm} />}
      {cat && <CatInfoDialog open={open2} setOpen={setOpen2} cat={cat} />}
    </div>
  );
};

export default Workbench;
